<template>
  <div>
    <!--<header>正在热映</header>-->
    <ul class="outUL">
      <ul class="outUL">
        <li v-for="item in movies">
          <img  :src= "item.images.small"  class="titleImg"><span class="rating">{{item.rating.average}}</span>
          <p>{{item.title}}</p>
          <ul class="middleUL">
            <li v-for="dirs in item.directors">{{dirs.name}}</li>
          </ul>
          <ul class="innerUL">
            <li v-for="info in item.genres">{{info}}</li>
          </ul>
        </li>
      </ul>
    </ul>
  </div>
</template>


<script type="text/ecmascript-6">
  import {getOnFilm} from '../api'


  export default {
    name: 'intheaters',
    data() {
      return{
        movies: ''
      }
    },
    async mounted() {
      var movie = await getOnFilm();
      this.movies= movie.subjects;
      console.log(movie.subjects);
    }
  }
</script>


<style scoped lang="less">
  *{
    margin:0;
    padding: 0;
    list-style: none;
  }
  div{
    width: 100%;
    height: 100%;
  }
  header{
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  div{
    background: olivedrab;
  }
  ul.outUL{
    width: 100%;
    float: left;
    background: olivedrab;
  }
  ul.outUL>li{
    width: 50%;
    float: left;
    list-style: none;
    position: relative;
    margin-top:0;
  }
  /*ul.innerUL{*/
  /*float: left;*/
  /*}*/
  ul.innerUL>li{
    width: 35px;
    height: 30px;
    line-height: 30px;
    float: left;
    border: 1px solid #cccccc;
    border-radius: 4px;
    text-align: center;
    margin-top:0;
    margin-left: 5px;
  }
  .titleImg{
    width: 100%;
    height: 300px;
  }
  .rating{
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    font-size: 18px;
  }
  ul.middleUL>li{
    float:left;
    margin-top:0;
    margin-left: 5px;
  }

</style>
